<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link href="${request.contextPath}/static/ihomeStatic/css/bootstrap.min.css" rel="stylesheet">
    <link href="${request.contextPath}/static/ihomeStatic/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="${request.contextPath}/static/ihomeStatic/css/font-awesome.min.css" rel="stylesheet">
    <link href="${request.contextPath}/static/ihomeStatic/css/animate.min.css" rel="stylesheet">
    <link href="${request.contextPath}/static/ihomeStatic/css/style.min.css" rel="stylesheet">
    <link href="${request.contextPath}/static/ihomeStatic/js/layer/mobile/need/layer.css" rel="stylesheet">



</head>
<body class="fixed-sidebar full-height-layout">
<input type="hidden" id="hi1">
<input type="hidden" id="hi2">
<div class="wrapper wrapper-content">
    <div class="ibox">
        <div class="ibox-content">
            <div id="content" class="row">
                <div class="row">
                    <div class="col-sm-12">
                        <form id="searchForm" class="form-inline" action="javascript:void(0)">
                            <!-- 支持排序 -->
                            <div class="form-group">

                                <input  id="keywords" name="keywords" class=" form-control input-sm" type="text"
                                        value="" maxlength="50" placeholder="名称/简体/繁体名称">
                                <button type="submit" class="btn btn-sm btn-primary" id="search-btn"><i
                                            class="fa fa-search"></i> 搜索
                                </button>
                                <button type="button" class="btn btn-sm btn-primary" id="clean-btn"><i
                                            class="fa fa-search"></i> 清除
                                </button>
                                </span>
                            </div>
                        </form>
                        <br>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12">
                        <div class="">
                            <a href="javascript:;" class="btn btn-success btn-xs" onclick="insert()"><i class="fa fa-plus"></i>新增</a>
                            <a href="javascript:;" class="btn btn-info btn-xs" onclick=""><i class="fa fa-edit"></i>修改</a>
                            <a href="javascript:;" class="btn btn-danger btn-xs" onclick="deletes()"><i class="glyphicon glyphicon-remove"></i>删除</a>
                            <!-- 增加按钮 -->
                        </div>
                        <br>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="jqGrid_wrapper">
                            <table id="datatable"></table>
                            <div id="table_pager"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script src="${request.contextPath}/static/ihomeStatic/js/jquery-1.12.4.js"></script>
<script src="${request.contextPath}/static/ihomeStatic/js/bootstrap.min.js"></script>
<script src="${request.contextPath}/static/ihomeStatic/js/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${request.contextPath}/static/ihomeStatic/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="${request.contextPath}/static/ihomeStatic/js/layer/layer.js"></script>
<script>


    $(function () {
        tabl01Init();

    });

    function tabl01Init() {
         var name = $("#keywords").val();
        $('#datatable').bootstrapTable({
            url: "${request.contextPath}/courseManage/selectList",                      //请求后台的URL（*）
            method: 'POST',                      //请求方式（*）
            contentType:"application/x-www-form-urlencoded",
            // classes: 'table table-hover',  //table加样式
            // theadClasses: "tableHead",                // 表头加样式
            //height: 400,
            // toolbar: '#toolbar',              //工具按钮用哪个容器
            striped: true,                     //是否显示行间隔色
            //cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            queryParams : function(params){
                return{
                    offset  : params.offset,
                    limit   : params.limit,
                     'name'  : name
                }

            },
            paginationLoop:false,                 //是否循环，从最后一页跳转到第一页（*）
            //sortable: true,                     //是否启用排序
            //sortOrder: "asc",                   //排序方式
            sidePagination: "client",             //分页方式：client客户端分页，server服务端分页（*）
            striped : true,                       //设置隔行变色效果
            minimumCountColumns : 2,              //当列数小于此值时，将隐藏内容列下拉框。
            paginationPreText : '上一页',
            paginationNextText : '下一页',
            pageNumber: 1,                        //初始化加载第一页，默认第一页,并记录
            pageSize : 5,                         //每页的记录行数（*）
            pageList : [5,10,15],                   //可供选择的每页的行数（*）
            search: false,                        //是否显示表格搜索
            strictSearch: false,
            showColumns: false,                   //是否显示所有的列（选择显示的列）
            //showRefresh: true,                  //是否显示刷新按钮
            //minimumCountColumns: 2,             //最少允许的列数
            // clickToSelect: true,               //是否启用点击选中行
            // uniqueId: "id",                    //每一行的唯一标识，一般为主键列
            // showToggle: false,                 //是否显示详细视图和列表视图的切换按钮
            // cardView: false,                   //是否显示详细视图
            // detailView: false,                 //是否显示父子表
            columns: [
                {
                checkbox: true
            },
                {
                field: 'id',
                title: ' ',
                undefinedText: "",
                align: 'center'
                // visible: false
            },{
                field: 'courseName',
                title: '科目名称',
                undefinedText: "",
                align: 'center'
                // visible: false
            },{
                field: 'imageUrl',
                title: '图片',
                undefinedText: "",
                align: 'center',
                formatter:image
                // visible: false
            },{
                field: 'originalPrice',
                title: '原价',
                undefinedText: "",
                align: 'center'
            },{
                field: 'activityPrice',
                title: '活动价',
                undefinedText: "",
                align: 'center'
            }, {
                field: 'discountRate',
                title: '折扣率'
            }, {
                field: 'sort',
                title: '排序',
                undefinedText: "",
                align: 'center'
            }, {
                field: 'status',
                title: '状态',
                undefinedText: "",
                align: 'center'
            },{
                field: 'createdTime',
                title: '创建时间',
                undefinedText: "",
                align: 'center'
            }, {
                field: 'operate',
                formatter: f(),
                title: '操作',
                align: 'center',
                undefinedText: "",
                events:operateEvents

            }]
        });
    }

    function f(value,row,index) {
        return[
            '<button type="button" class="btn btn-success btn-xs"id="update"><span class="glyphicon glyphicon-edit"></span> 编辑</button>'+
            "&nbsp;"+
            '<button type="button" class="btn btn-info btn-xs"id="view"><span class="glyphicon glyphicon-zoom-in"></span> 查看</button>'+
            "&nbsp;"+
            '<button type="button" class="btn btn-danger btn-xs"id="delete"><span class="glyphicon glyphicon-remove"></span> 删除</button>'
        ].join('');
    }


    function image(cellvalue,options,rowObject) {
        var arr = new Array();
        arr = cellvalue.split(',');
        console.log(arr.length);
        for (var i = 0;i<arr.length;i++){
            return '<img  src='+arr[i]+' width="100" height="100" class="img-rounded" >';
        }
    }

    window.operateEvents={
        'click #update' : function (e,value,row,index) {
            layer.open({
                type: 2,
                area: ['700px', '500px'],
                fixed: false, //不固定
                maxmin: true,
                content: '${request.contextPath}/courseManage/toUpdate?id='+row.id,

                end: function () {
                    if($("#hi2").val() == "1"){
                        layer.msg('成功', {icon: 1});
                        window.location.reload();
                    }else {

                    }

                }



            });
        },

        'click #delete' : function (e,value,row,index) {
            layer.confirm('是否确定删除？', {
                btn: ['是','否'] //按钮
            }, function(){
                $.ajax({
                    url:"${request.contextPath}/courseManage/delete",
                    type:"POST",
                    data:{id:row.id,status:row.status},
                    success:function (data) {
                        if(data.returnCode!=null || data.returnCode!="")
                        window.location.reload();
                    },
                    error:function () {
                        alert("erer")
                    }



                });
                layer.msg('删除成功', {icon: 1});
            }, function(){
            });
        },


        'click #view' : function (e,value,row,index) {
            layer.open({
                type: 2,
                area: ['750px', '700px'],
                fixed: false, //不固定
                maxmin: true,
                content: '${request.contextPath}/courseManage/view?id=' + row.id,

                end: function () {


                }
            });

            }
    };

    function reload(){
        tabl01Init();
    }




    $("#search-btn").click(function () {
        $('#datatable').bootstrapTable('destroy');
        tabl01Init();
    });

    function deletes() {
        var arr=[];
        var ids = $('#datatable').bootstrapTable('getAllSelections');

        for (var i = 0; i < ids.length; i++) {
            arr.push(ids[i].id)
        }


        layer.confirm('是否确定删除？', {
            btn: ['是','否'] //按钮
        }, function(){
            $.ajax({
                url:"${request.contextPath}/courseManage/deletes",
                type:"POST",
                data:{arr:arr.toString()},
                success:function (data) {
                    if(data.returnCode!=null || data.returnCode!="")
                        window.location.reload();
                },
                error:function () {
                    alert("erer")
                }



            });
            layer.msg('删除成功', {icon: 1});
        }, function(){
        });

    }

    function insert() {
        layer.open({
            type: 2,
            area: ['700px', '500px'],
            fixed: false, //不固定
            maxmin: true,
            content: '${request.contextPath}/courseManage/toAdd',

            end: function () {

                if($("#hi1").val() == "1"){
                    layer.msg('成功', {icon: 1});
                    window.location.reload();
                }else {

                }

            }



        });


    }



</script>
</html>
